Hola, amigos, estoy tratando de crear mi propia aplicación, pero tengo problemas después de actualizar react-router-dom a 6.02. Recibo este error.
Error: [Inicio] no es un componente de ruta. Todos los componentes secundarios de Rutas deben ser una Ruta o <React.Fragment>
el codigo es el siguiente
import { BrowserRouter, Route, Routes } from "react-router-dom"; import Navbar from "./components/Navbar/Navbar"; import Home from "./pages/home/Home"; import Login from "./pages/login/Login"; import Signup from "./pages/signup/Signup"; function App() { return ( <div className="App"> <BrowserRouter> <Navbar /> <Routes> <Route exact path="/"> <Home /> </Route> <Route path="/login"> <Login /> </Route> <Route path="/signup"> <Signup /> </Route> </Routes> </BrowserRouter> </div> ); } export default App;<Route path="/" element={<Home />} />
También tengo el mismo problema, si usa v6, intente no usar la etiqueta de cierre para la ruta y use la propiedad del elemento para definir su componente, por ejemplo, para la ruta de Inicio, debe hacer esto
<Route exact path="/" element={<Home />} />Corregido para múltiples componentes bajo la misma Route . Envuelva varios componentes dentro de las etiquetas <> y </> .
<Route exact path="/" element={<><AddTodo addTodo={addTodo} /><Todos todos={todos} onDelete={onDelete} /></>} />Este error ocurre debido a la nueva actualización de la biblioteca react-router-dom.
Esta es la solución a tu problema.
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'; function App() { return ( <div className="App"> <Router> <Navbar /> <Routes> <Route exact path='/' element={<Home />} /> <Route path='/register' element={<Signup />} /> <Route path='/Login' element={<Login />} /> </Routes> </Router> </div> ); } export default App; Esta es la solución para esta versión "react-router-dom": "^6.0.2",
Nota: - Hay algunas características más que esta en la nueva versión de react-router-dom . https://reactrouter.com/docs/en/v6
El paquete del enrutador React tiene algún tipo de cambio de código con respecto a las versiones.
// React router v4 or v5 <Route path="/" component={Home} /> // React router v5.1 <Route exact path="/"> <Home /> </Route> // React router v6 <Route path="/" element={<Home />} />Para más información: React Router - Actualización a V6
Por lo tanto, puede usar la sintaxis V6 para resolver este problema.
Error no detectado: [Inicio] no es un componente. Todos los elementos secundarios de deben ser una solución o <React.Fragment>
function App() { return ( <> <Router> <Routes> <Route exact path="/" element={<Home />} /> </Routes> </Router> </> ); }